<script setup lang="ts">
  import {onMounted, ref} from "vue";
  import axios from "axios";
  import {Delete, Plus} from "@element-plus/icons-vue";
  
  const result = ref({
    data: "请求结果将在这里显示"
  })
  
  const props: any = defineProps({
    data: Object
  })
  onMounted(() => {
  })
  //请求方式列表
  const methodList = ["GET", "POST", "PUT", "DELETE"]
  //传参方式列表
  const typeList = ["form-data", "raw"]
  const type = ref("")
  
  const paramsUtils = (list: any) => {
    let obj: any = {}
    list.forEach((item: any) => {
      if (item.key !== "") {
        obj[item.key] = item.value
      }
    })
    return obj
  }
  const addItem = (type: string) => {
    if (type === "params") {
      props.data.paramsList.push({key: "", value: ""})
    }
    if (type === "header") {
      props.data.headers.push({key: "", value: ""})
    }
    if (type === "data") {
      props.data.dataList.push({key: "", value: ""})
    }
  }
  const delItem = (index: number, type: string) => {
    if (type === "header") {
      props.data.headers = props.data.headers.filter((_: any, i: number) => i !== index)
    }
    if (type === "params") {
      props.data.paramsList = props.data.paramsList.filter((_: any, i: number) => i !== index)
    }
    if (type === "data") {
      props.data.dataList = props.data.dataList.filter((_: any, i: number) => i !== index)
    }
  }
  const send = () => {
    loading.value = true
    axios({
      url: props.data.requestUrl,
      method: props.data.requestMethod,
      headers: paramsUtils(props.data.headers),
      params: paramsUtils(props.data.paramsList),
      data: paramsUtils(props.data.dataList),
    }).then((res: any) => {
      result.value.data = res.data
      loading.value = false
    }).catch((err: any) => {
      result.value.data = err
      loading.value = false
    })
  }
  
  const loading = ref(false)

</script>

<template>
  <div class="form">
    <div class="mode">
      <el-select
          v-model="props.data.requestMethod"
          class="m-2"
          placeholder="Select"
          style="width: 150px"
      >
        <el-option
            v-for="item in methodList"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
      <el-input v-model="props.data.requestUrl" placeholder="url"/>
      <el-button @click="send">发送</el-button>
    </div>
    <el-tabs
        type="card"
        class="demo-tabs"
    >
      
      <el-tab-pane
          label="Query"
      >
        <div class="form-item" v-for="(item,index) in props.data.paramsList" :key="index">
          <div class="params">
            <el-input v-model="item.key" placeholder="key"/>
            <el-input v-model="item.value" placeholder="value"/>
          </div>
          <el-button :icon="Delete" circle @click="delItem(index,'params')"
              :disabled="props.data.paramsList.length<2"></el-button>
        </div>
        <div class="add-button">
          <el-button :icon="Plus" @click="addItem('params')"></el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane
          label="Header"
      >
        <div class="form-item" v-for="(item,index) in props.data.headers" :key="index">
          <div class="params">
            <el-input v-model="item.key" placeholder="key"/>
            <el-input v-model="item.value" placeholder="value"/>
          </div>
          <el-button :icon="Delete" circle @click="delItem(index,'header')"
              :disabled="props.data.headers.length<2"></el-button>
        </div>
        <div class="add-button">
          <el-button :icon="Plus" @click="addItem('header')"></el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane
          label="Body"
      >
        <div>
          <div class="mode">
            <el-radio-group v-model="type" size="small">
              <el-radio-button :label="item" v-for="(item,index) in typeList" :key="index"/>
            </el-radio-group>
          </div>
          <div class="form-item" v-for="(item,index) in props.data.dataList" :key="index">
            <div class="params">
              <el-input v-model="item.key" placeholder="key"/>
              <el-input v-model="item.value" placeholder="value"/>
            </div>
            <el-button :icon="Delete" circle @click="delItem(index,'data')"
                :disabled="props.data.dataList.length<2"></el-button>
          </div>
          <div class="add-button">
            <el-button :icon="Plus" @click="addItem('data')"></el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    
    <div class="result" v-loading="loading" element-loading-text="请求中...">
      <json-viewer :value="result.data" :expanded="true"></json-viewer>
    </div>
  
  </div>
</template>

<style scoped>
  
  .form {
    height: 85vh;
    padding: 0 15px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
    .mode {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      font-weight: bold;
      text-align: center;
    }
    
    .demo-tabs {
      /*min-height: 300px;*/
      /*height: 300px;*/
      overflow-y: scroll;
      flex: 1;
      position: relative;
      min-height: 100px;
      
      
      .form-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-right: 8px;
        box-sizing: border-box;
        
        .params {
          width: 80%;
          display: flex;
          
          > * {
            margin-right: 20px;
          }
        }
      }
      
      .add-button {
        .el-button {
          width: 100%;
          background: #409eff;
          color: #fff;
        }
      }
    }
    
    .result {
      width: 100%;
      margin-top: 20px;
      height: 200px;
      overflow: auto;
      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
    }
  }
  
  .demo-tabs::-webkit-scrollbar {
    width: 2px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #eee;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

</style>


